<template>
	<view :class="themeName">
		<view class="bargain-progress">
			<!-- 顶部 -->
			<view class="header">
				<view class="" v-if="status != 4">
					<view class="white" style="font-size: 36rpx; margin-bottom: 11rpx;" v-if="status == 0">
						您正在发起砍价
					</view>
					<view class="white" style="font-size: 36rpx; margin-bottom: 11rpx;" v-if="status == 1">
						砍价中
					</view>
					<view class="white" style="font-size: 36rpx; margin-bottom: 11rpx;" v-if="status == 2">
						砍价成功
					</view>
					<view class="white" style="font-size: 36rpx; margin-bottom: 11rpx;" v-if="status == 3">
						砍价失败
					</view>
					<view class="white" style="font-size: 22rpx; margin-bottom: 30rpx;" v-if="status == 0">
						邀请好友帮忙砍价 —— 砍至{{bargainData.min_price || ''}}元即可发货
					</view>
					<view class="white" style="font-size: 22rpx; margin-bottom: 30rpx;"
						v-if="status == 1 || status == 2 || status == 3">
						邀请好友帮忙砍价 —— 砍至{{bargainData.floor_price}}元即可发货
					</view>
				</view>

				<view class="flex-col" v-if="status== 4">
					<view class="flex m-d-30">
						<u-image width="80rpx" height="80rpx" shape="circle" :src="bargainData.initiate_user.avatar" />
						<view class="flex-col m-l-20">
							<view class="white" style="font-size: 28rpx;">
								来自{{bargainData.initiate_user.nickname}}的分享
							</view>
							<view class="white" style="font-size: 22rpx;">
								谢谢你的助力，动动手指帮我砍一刀
							</view>
						</view>
					</view>
				</view>
				<!-- 商品详情 -->
				<view class="goods-item flex bg-white m-t-30">
					<u-image width="180rpx" height="180rpx" border-radius="10rpx" :src="bargainData.goods_image" />
					<view class="goods-info m-l-15 flex-1">
						<view class="goods-name line-2 m-b-10">{{bargainData.goods_name || ''}}</view>
						<view class="info-footer flex row-between m-t-5" v-if="status == 0">
							<view class="flex-col">
								<price :content="bargainData.min_price" prefix="最低可砍至￥" :color="themeColor"
									mainSize="34rpx" minorSize="24rpx" />
								<price :content="bargainData.goods_max_price" prefix="原价￥" color="#999999"
									mainSize="24rpx" minorSize="24rpx" />
							</view>
						</view>

						<view class="info-footer flex row-between m-t-5 flex-1"
							v-if="status == 1 || status == 2 || status == 3 || status == 4">
							<view class="flex-col flex-1">
								<view class="" style="color: #999999; font-size: 24rpx;">
									{{ bargainData.item_spec_value_str}}
								</view>
								<view class="flex row-between flex-1">
									<view class="">
										<price :content="bargainData.item_sell_price" prefix="原价￥" color="#999999"
											mainSize="24rpx" minorSize="24rpx" />
									</view>
									<view class="flex" v-if="status == 1">
										<!-- <u-count-down 
										  :timestamp="bargainData.end_time - nowTime"
										  color="#FFFFFF"
										  :bg-color="themeColor"
										  :separator-color="themeColor"
										/> -->
										<view class="flex">
											<u-count-down :timestamp="bargainData.end_time - nowTime" height="36"
												separator="zh" :show-hours="false" :show-minutes="false"
												:show-seconds="false" :font-size="24" :separator-size="22" />
											<u-count-down :timestamp="(bargainData.end_time - nowTime)%(60 * 60 * 24)"
												color="#FFFFFF" height="36" separator="colon" :show-days="false"
												:font-size="24" :separator-size="22" :bg-color="bgColor || themeColor"
												:separator-color="separatorColor || themeColor" />
										</view>
										<!-- <count-down :time-end="bargainData.end_time" /> -->
										<view class="muted xs m-l-5">
											后结束帮砍
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 请选择商品规格 未砍价时才有 -->
			<view class="content" v-if="status == 0">
				<view class="title">
					请选择商品规格
				</view>

				<view class="choose-content flex row-between">
					<view class="flex">
						<view class="muted sm">已选：</view>
						<view class="md normal">
							{{ specValueStr || ''}}
						</view>
					</view>
					<!-- <u-icon name="arrow-right" size="28" color="#999" /> -->
				</view>

				<!-- 规格选择Popup -->
				<goods-spec  :defaultInfo="{
						image: bargainData.image,
						price: bargainData.goods_max_price,
						stock: bargainData.total_stock,
						bargain_price: bargainData.min_price
					}" v-model="showGoodsSpec" :default-select="true" :is-bargain="true" :goods="bargainData.goods_id" :buttons="specButtonsList" @change="changeGoodsSpec"
					@confirm="handleConfirm" :spec-list="bargainData.spec_value"
					:spec-map="bargainData.spec_value_list" />

				<view class="lunch-btn white br60 flex row-center" @click="onSelect">发起砍价</view>
			</view>

			<!-- 砍价进度 发起砍价后有/查看砍价进度 -->
			<view class="progressing" v-if="status == 1 || status == 2 || status == 3">
				<view class="progressing-heared">
					已砍<text class="progressing-text">{{bargainData.help_total}}</text>元，还差<text
						class="progressing-text">{{bargainData.help_diff}}</text>元
				</view>
				<view class="progress-container row-center flex">
					<view class="progress m-r-16">
						<view class="progress-bar" :style="{'width': bargainData.precent + '%'}" />
					</view>
					<price :content="bargainData.floor_price" prefix="￥" mainSize="24rpx" minorSize="24rpx"
						:color="themeColor" />
				</view>
				<!-- 是否成功文字描述 -->
				<view class="m-b-35 flex row-center ">
					<view class="" v-if="status == 2">
						恭喜您，砍价成功
					</view>
					<view class="" v-if="status == 3">
						非常遗憾，砍价失败
					</view>
				</view>
				<!-- 按钮 -->
				<view class="p-btn">
					<view class="" v-if="status == 1">
						<view class="flex flex-1" v-if="bargainData.btns.buy_now_btn">
							<view class="flex row-center m-r-16 flex-1 btn-event" @click="goToConfirm('random')">
								<view class="lunch-btn-event white br60 flex row-center flex-1">
								</view>
								<view class="lunch-btn-font">
									¥{{ bargainData.current_price}} 直接购买
								</view>
							</view>
							<view class="lunch-btn white br60 flex row-center flex-1" @click="shareToBargain">邀请好友帮砍价
							</view>
						</view>
						<view class="lunch-btn white br60 flex row-center" @click="shareToBargain" v-else>邀请好友帮砍价</view>
					</view>
					<view class="" v-if="status == 2">
						<view class="lunch-btn white br60 flex row-center" @click="goToConfirm('floor')"
							v-if="bargainData.btns.buy_allow_btn">立即购买</view>
						<view class="lunch-btn white br60 flex row-center" @click="goToOrder" v-else>查看订单</view>
					</view>
					<view class="" v-if="status == 3">
						<view class="lunch-btn-fail white br60 flex row-center">砍价失败</view>
					</view>
				</view>

				<!-- 砍价记录 -->
				<view class="bargain-code-content">
					<view class="bargain-code-title flex row-between">
						<view class="md normal bold">
							砍价记录
						</view>
						<view class="muted xs">
							已有{{ bargainData.help_num }}人帮砍
						</view>
					</view>
					<view class="code-content">
						<view class="user-item row-between flex" v-for="(item, index) in bargainData.help_record"
							:key="item.id">
							<view class="user-content flex">
								<u-image width="80rpx" height="80rpx" shape="circle" :src="item.avatar" />
								<view class="m-l-20">
									<view class="sm normal">
										{{item.nickname}}
									</view>
									<view class="muted xxs">
										小刀一砍，惊喜满满
									</view>
								</view>
							</view>
							<view class="bargain-price xs">
								¥{{item.reduce_amount || 0}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 分享进入 -->
			<view class="shareDetails" v-if="status == 4">
				<!-- 按钮 -->
				<view class="s-btn">
					<!-- <view class="lunch-btn white br60 flex row-center"
						@click="onBargain">帮忙砍一刀</view> -->
					<view class="tips m-b-30" v-if="bargainData.tips">
						{{ bargainData.tips }}
					</view>
					<view class="lunch-btn white br60 flex row-center" v-if="bargainData.btns.help_btn"
						@click="onBargain">帮忙砍一刀</view>
					<view class="lunch-btn-fail br60 flex row-center" v-if="bargainData.btns.initiate_btn"
						@click="onGoodsBargain">我也要砍价</view>
				</view>

				<!-- 砍价记录 -->
				<view class="bargain-code-content">
					<view class="bargain-code-title flex row-between">
						<view class="md normal bold">
							砍价记录
						</view>
						<view class="muted xs">
							已有{{ bargainData.help_record.length }}人帮砍
						</view>
					</view>
					<view class="code-content">
						<view class="user-item row-between flex" v-for="(item, index) in bargainData.help_record"
							:key="item.id">
							<view class="user-content flex">
								<u-image width="80rpx" height="80rpx" shape="circle" :src="item.avatar" />
								<view class="m-l-20">
									<view class="sm normal">
										{{item.nickname}}
									</view>
									<view class="muted xxs">
										小刀一砍，惊喜满满
									</view>
								</view>
							</view>
							<view class="bargain-price xs">
								¥{{item.reduce_amount || 0}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 砍价成功弹窗/帮砍成功弹窗 -->
			<u-popup v-model="showBargainPop" mode="center">
				<view class="bargain-pop-container">
					<view class="md normal bold flex row-center" style="padding-top: 64rpx;">
						恭喜您成功砍下<text class="lg" style="color: #FF2C3C;">{{reduceAmount || 0}}</text>元
					</view>
					<view class="bold md flex row-center" style="margin-top: 38rpx;" v-if="status != 4">
						还差<text class="m-l-20 differ-price" style="color: #FF2C3C;">{{diffPrice}}<text
								style="font-size: 40rpx;">元</text></text>
					</view>
					<view class="bold xxl flex row-center" style="margin-top: 38rpx; color: #FF2C3C;"
						v-if="status == 4">
						已为好友砍价成功
					</view>
					<view class="progress-container row-center flex">
						<view class="progress">
							<view class="progress-bar" :style="{'width': precent + '%'}" />
						</view>
					</view>
					<view class="row-center flex">
						<view class="invite-btn row-center md flex" @click="shareToBargain" v-if="status != 4">
							邀请好友帮砍
						</view>
						<view class="invite-btn row-center md flex" @click="closeBargainPop" v-if="status == 4">
							确定
						</view>
					</view>
				</view>
				<view class="close-icon flex row-center" @click="closeBargainPop" mode="bottom">
					<u-icon name="close-circle" size="68rpx" color="#fff"></u-icon>
				</view>
			</u-popup>

			<!-- 分享弹窗 -->
			<share-popup v-model="showSharePop" :share-id="initiateId"
				pagePath="bundle/pages/bargain_progress/bargain_progress" :config="{
					avatar: userInfo.avatar,
					nickname: userInfo.nickname,
					image: bargainData.goods_image,
					name: bargainData.goods_name,
				  }" type="bargain" />
		</view>

		<!-- 加载动画 -->
		<page-status :status="pageStatus">
			<template #error>
				<u-empty text="加载异常"></u-empty>
			</template>
		</page-status>
		<float-tab />
	</view>
</template>

<script>
	import {
		apiBargainDetail,
		apiBargainInitiate,
		apiBargainProgress,
		apiBargainShareDetail,
		apiBargainHelp,
	} from "@/api/bargain.js";
	import {
		OrderTypeEnum
	} from '@/utils/enum'
	import {
		strToParams
	} from "@/utils/tools.js";
	import {
		PageStatusEnum
	} from '@/utils/enum';
	import {
		apiUserCentre,
	} from '@/api/user'
	export default {
		data() {
			return {
				// 页面加载状态
				pageStatus: PageStatusEnum['LOADING'],

				activityId: 0, // 砍价活动id
				goodsId: 0, // 商品id

				// 砍价未开始数据
				bargainData: {},

				showGoodsSpec: false, // 商品规格: 显示 | 隐藏
				specButtonsList: [], // 弹窗自定义按钮
				goodsSpecOptions: {}, // 已选商品规格

				// 规格按钮组
				specButtonsGroups: {
					confirm: {
						event: 'confirm',
						text: '确认',
					},
				},
				// 发起砍价放回数据
				reduceAmount: 0, // 自己的帮砍金额
				diffPrice: 0, // 还差多少到底价的金额
				needHelp: 0, // 总共需要砍的价格
				currentPrice: 0, // 当前价格
				precent: 0, // 砍价进度条百分比
				initiateId: 0, // 砍价id


				showBargainPop: false, // 砍价成功弹窗
				showSharePop: false, // 分享弹窗

				// 分享信息
				config: {
					name: '',
					link: '',
					image: '',
					nickname: '',
				},

				status: 0, // 页面状态 0-未发起（发起砍价 1-砍价中 2-砍价成功 3-砍价失败 4-分享进入（分享/海报）
				nowTime: 0, // 当前时间
			};
		},

		computed: {
			// 已选商品规格
			specValueStr() {
				return this.goodsSpecOptions?.spec?.spec_value_str ?? ''
			},
		},

		methods: {
			// 发起砍价页面数据
			bargainDetail() {
				apiBargainDetail({
						activity_id: this.activityId,
						goods_id: this.goodsId,
					})
					.then(res => {
						console.log('res', res)
						this.bargainData = res

						this.config.name = this.bargainData.goods_name
						this.config.link = "bundle/pages/bargain_process/bargain_process?initiate_id=" + this
							.initiateId
						this.config.image = this.bargainData.goods_image
						this.config.nickname = this.userInfo.nickname

						this.pageStatus = PageStatusEnum['NORMAL']
					})
					.catch(() => {
						this.pageStatus = PageStatusEnum['ERROR']
					})
			},

			// 点击选择规格
			onSelect() {
				this.showGoodsSpec = true
				this.specButtonsList = [this.specButtonsGroups.confirm]
			},
			// 更改规格
			changeGoodsSpec(options) {
				this.goodsSpecOptions = options
				console.log(options)
			},
			// 确定->发起砍价
			handleConfirm({
				spec,
				number
			}) {
				if (!this.isLogin) return this.$Router.push('/pages/login/login')
				apiBargainInitiate({
						activity_id: this.activityId,
						item_id: spec.id,
						goods_num: number,
					})
					.then(res => {
						console.log('发起砍价', res)
						this.reduceAmount = res.reduce_amount
						this.diffPrice = res.diff_price
						this.initiateId = res.initiate_id
						this.needHelp = res.need_help

						this.bargainProgress()

						// 自己不能帮砍，不显示弹窗
						if (!res.reduce_amount && !res.need_help) {
							return
						}

						// 砍价进度条数据
						this.precent = ((res.reduce_amount / res.need_help).toFixed(2)) * 100
						this.showBargainPop = true
					})
			},

			// 砍价进度
			bargainProgress() {
				apiBargainProgress({
						initiate_id: this.initiateId
					})
					.then(res => {
						this.bargainData = res
						this.status = res.status
						// 砍价进度条数据
						this.bargainData.precent = ((res.help_total / (res.help_total + res.help_diff)).toFixed(2)) *
							100

						this.config.link = "bundle/pages/bargain_process/bargain_process?initiate_id=" + this.initiateId
						this.config.image = this.bargainData.goods_image
						this.config.name = this.bargainData.goods_name
						this.config.nickname = this.userInfo.nickname

						// throw 'abcd'
						this.pageStatus = PageStatusEnum['NORMAL']
					})
					.catch(() => {
						this.pageStatus = PageStatusEnum['ERROR']
					})
			},

			// 关闭砍价弹窗
			closeBargainPop() {
				this.showBargainPop = false
			},

			// 邀请好友
			shareToBargain() {
				// this.showBargainPop = false
				// if (this.isHelpKnife) {
				// 	return;
				// }
				this.showSharePop = true
			},

			// 监听分享
			// #ifdef MP-WEIXIN
			onShareAppMessage() {
				return {
					path: "bundle/pages/bargain_progress/bargain_progress?initiate_id=" + this.initiateId + '&isShare=2' +
						'&invite_code=' + this.userInfo.code,
					title: '我正在参与砍价，还差一步',
					imageUrl: this.bargainData.goods_image
				}
			},
			// #endif

			// 分享详情内容
			bargainShareDetail() {
				return new Promise((reslove, reject) => {
					apiBargainShareDetail({
							initiate_id: this.initiateId,
						})
						.then(res => {
							this.bargainData = res
							this.config.image = this.bargainData.goods_image
							reslove(res)
							this.pageStatus = PageStatusEnum['NORMAL']
						})
						.catch(errMsg => {
							reject(errMsg)
							this.pageStatus = PageStatusEnum['ERROR']
						})
				})
			},
			// 去订单详情
			goToOrder() {
				this.$Router.push({
					path: '/pages/order_detail/order_detail',
					query: {
						order_id: this.bargainData.order_id
					}
				})
			},
			// 去结算
			goToConfirm(type) {
				this.$Router.replace({
					path: '/pages/goods_order/goods_order',
					query: {
						from: OrderTypeEnum['BARGAIN'],
						payload: {
							initiate_id: this.initiateId,
							buy_condition: type, // 购买类型 random-任意金额购买 floor-底价购买
						}
					}
				})
			},

			// 好友砍价
			onBargain() {
				apiBargainHelp({
						initiate_id: this.initiateId,
					})
					.then(res => {
						console.log('发起砍价', res)
						this.reduceAmount = res.reduce_amount
						this.currentPrice = res.current_price
						this.initiateId = res.initiate_id

						// 砍价进度条数据
						this.precent = (((res.need_help - res.diff_price) / res.need_help).toFixed(2)) * 100

						this.$nextTick(function() {
							this.showBargainPop = true
						})
						this.bargainShareDetail()
					})
			},

			// 我也要砍价-》跳转到砍价列表页面
			onGoodsBargain() {
				uni.navigateTo({
					url: '/bundle/pages/goods_bargain/goods_bargain',
				})
			},
		},

		onLoad() {
			// 获取当前时间
			let ndate = new Date()
			this.nowTime = (Date.parse(ndate)) / 1000
			console.log('nowTime', this.nowTime)

			const options = this.$Route.query
			const scene = options['scene']
			const id = options?.id  // h5二维码
			console.log("scene", scene)

			// 扫码进入
			if (scene || id) {
				scene ? this.initiateId = strToParams(options['scene'])['id']
					: this.initiateId = id
				console.log('initiateId', this.initiateId)

				this.status = 4
				this.bargainShareDetail().then(data => {

					console.log('data', data)
					console.log('this.bargainData.user_id', data.user_id)
					// 获取用户信息
					apiUserCentre()
						.then(res => {
							console.log("resres", res)
							// 本人进入分享请求砍价进度信息
							if (this.bargainData.user_id == res.id) {
								this.bargainProgress()
							}
						})
				})
			} else { // 非扫码进入
				// 发起砍价和分享需要用到
				if (options.goods_id)
					this.goodsId = options.goods_id

				// 发起砍价->发起详情
				if (options.activity_id) {
					this.activityId = options.activity_id

					setTimeout(() => {
						this.bargainDetail()
					}, 50)
					return
				}

				// options.isShare=1即是砍价记录进来  options.isShare=2是微信小程序分享进入
				if (options.isShare == 2) {
					this.status = 4
					this.initiateId = options.initiate_id
					this.bargainShareDetail().then(data => {

						console.log('data', data)
						console.log('this.bargainData.user_id', data.user_id)

						// 获取用户信息
						apiUserCentre()
							.then(res => {
								console.log("resres", res)
								// 本人进入分享请求砍价进度信息
								if (this.bargainData.user_id == res.id) {
									this.bargainProgress()
								}
							})
					})

				} else if (options.isShare == 1) {
					this.initiateId = options.initiate_id
					this.bargainProgress()
				}
			}

		},

		// watch: {
		// 	userInfo(val) {
		// 		console.log('this.userInfo.user_id',val.id)
		// 		console.log('this.bargainData.user_id',this.bargainData.user_id)
		// 		// 本人进入分享请求砍价进度信息
		// 		if (this.bargainData.user_id == val.id) {
		// 			this.bargainProgress()
		// 		}
		// 	}
		// }
	}
</script>

<style lang="scss" scoped>
	.bargain-progress {
		.header {
			padding: 0 24rpx;
			@include background_linear();
			// background-image: url(../../../static/images/bg_hometop.png);
			height: 330rpx;
			background-size: 100% 100%;
			padding-top: 30rpx;

			.goods-item {
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
			}
		}

		.content {
			margin-top: 88rpx;
			padding: 0 24rpx;

			.title {
				font-family: "PingFang SC";
				font-weight: 500;
				font-size: 34rpx;
				text-align: left;
				color: #333;
				margin-bottom: 30rpx;
			}

			.choose-content {
				padding: 30rpx 20rpx;
				background-color: #FFFFFF;
			}

			.lunch-btn {
				@include background_color() margin-top: 40rpx;
				width: 702rpx;
				height: 84rpx;
				border-radius: 42rpx;
				// background: #ff2c3c;
				// box-shadow: 0rpx 3rpx 10rpx rgba(235, 36, 51, 0.5);
			}
		}

		.bargain-pop-container {
			width: 559rpx;
			height: 580rpx;
			background-image: url(../../static/images/bg_kanjia.png);
			background-size: 100% 100%;

			.differ-price {
				font-size: 58rpx;
				line-height: 38rpx;
			}

			.progress-container {
				margin-top: 26rpx;

				.progress {
					width: 409rpx;
					height: 20rpx;
					// background-color: #FD498F1A;
					background-color: #F6F6F6;
					border-radius: 50rpx;

					.progress-bar {
						height: 100%;
						width: 0%;
						@include background_linear();
						// background: linear-gradient(90deg, #FA444D 0%, #FD498F 100%);
						border-radius: 50rpx;
						transition: width .5s ease;
					}
				}
			}

			.invite-btn {
				background-image: url(../../static/images/coupon_button.png);
				background-size: 100% 100%;
				height: 106rpx;
				color: #7B3200;
				font-weight: 500;
				margin-top: 180rpx;
				width: 478rpx;
			}
		}

		.close-icon {
			margin-top: 26rpx;
		}

		.share-pop-container {
			height: 500rpx;
			background-color: $-color-white;
		}

		.progressing {
			margin: 88rpx 24rpx 0 24rpx;
			padding: 24rpx;
			background-color: #FFFFFF;

			.progressing-heared {
				margin-bottom: 33rpx;

				.progressing-text {
					@include font_color();
				}
			}

			.progress-container {
				margin-bottom: 35rpx;

				.progress {
					width: 568rpx;
					height: 20rpx;
					background-color: #F6F6F6;
					border-radius: 50rpx;

					.progress-bar {
						height: 100%;
						width: 0%;
						// background: linear-gradient(90deg, #FA444D 0%, #FD498F 100%);
						@include background_linear();
						border-radius: 50rpx;
						transition: width .5s ease;
					}
				}
			}

			.p-btn {
				.lunch-btn {
					margin-bottom: 60rpx;
					// width: 702rpx;
					height: 84rpx;
					border-radius: 42rpx;
					@include background_color() // background: #ff2c3c;
					// box-shadow: 0rpx 3rpx 10rpx rgba(235, 36, 51, 0.5);
				}

				.lunch-btn-fail {
					margin-bottom: 60rpx;
					// width: 702rpx;
					height: 84rpx;
					border-radius: 42rpx;
					background: #e5e5e5;
				}

				.lunch-btn-event {
					margin-bottom: 60rpx;

					height: 84rpx;
					border-radius: 42rpx;
					@include background_color();
					opacity: 0.2;
				}

				.lunch-btn-font {
					@include font_color();
					position: absolute;
					top: 22rpx;
				}

				.btn-event {
					position: relative;
				}
			}

			.bargain-code-content {
				margin-top: 62rpx;

				.bargain-code-title {}

				.code-content {
					// margin-top: 30rpx;

					.user-item {
						padding: 15rpx 0;
						margin-bottom: 30rpx;

						.bargain-price {
							@include font_color();
						}
					}
				}
			}
		}

		.shareDetails {
			// margin: 88rpx 24rpx 0 24rpx;
			margin: 68rpx 0rpx 0 0rpx;
			padding: 24rpx;

			// background-color: #FFFFFF;
			.s-btn {
				margin: 0 24rpx;

				.lunch-btn {
					margin-bottom: 30rpx;
					// width: 702rpx;
					height: 84rpx;
					border-radius: 42rpx;
					@include background_color() // background: #ff2c3c;
					// box-shadow: 0rpx 3rpx 10rpx rgba(235, 36, 51, 0.5);
				}

				.lunch-btn-fail {
					margin-bottom: 40rpx;
					// width: 702rpx;
					height: 84rpx;
					border-radius: 42rpx;
					background: #FFFFFF;
				}
			}

			.bargain-code-content {
				padding: 24rpx;
				background-color: #FFFFFF;

				// margin-top: 62rpx;
				.bargain-code-title {}

				.code-content {
					margin-top: 30rpx;

					.user-item {
						padding: 15rpx 0;
						margin-bottom: 30rpx;

						.bargain-price {
							@include font_color();
						}
					}
				}

			}
		}

		.tips {
			font-family: "PingFang SC Bold";
			font-weight: bold;
			font-size: 28rpx;
			text-align: center;
			color: #999;
		}
	}
</style>
